<template>
    <div class="flex-app-continer">
        <div class='tit-area'>
          <span class='tit'>开票项目</span>
          <span class='non-select' v-if='selectRow==null'>未选择</span>
          <span class='select' v-else>已选择：{{formData.selectSource=='1' ? selectRow.sphfwmc : selectRow.productName}}
            <vxe-button status="primary" type="text" title="删除" icon="fa fa-close" @click="del()" style='color: #333'></vxe-button>
          </span>
        </div>
        <div style="display: flex; position: relative">
          <vxe-form :data="formData" @submit="query" size="mini" title-align="right" title-width="110" style="width: 900px">
            <vxe-form-item title="商品和服务税收分类合并编码:" field="hbcode" :item-render="{}" title-width="210">
              <template v-slot>
                <el-input size="small" style='width: 110px' v-model="formData.hbcode" placeholder="请输入" clearable></el-input>
              </template>
            </vxe-form-item>
            <vxe-form-item title="商品和服务名称:" field="proname" :item-render="{}">
              <template v-slot>
                <el-input size="small" style='width: 110px' v-model="formData.proname" placeholder="请输入" clearable></el-input>
              </template>
            </vxe-form-item>
            <vxe-form-item title="商品和服务简称:" field="shortName" :item-render="{}">
              <template v-slot>
                <el-input size="small" style='width: 110px' v-model="formData.shortName" placeholder="请输入" clearable></el-input>
              </template>
            </vxe-form-item>
  
          </vxe-form>
          <div style="position: absolute; right: 0px;bottom:0.5em;">
            <vxe-button @click="query" status="primary">查询</vxe-button>
            <vxe-button @click="reset">重置</vxe-button>
          </div>
        </div>
        <div class="flex-app-continer-table-div" :style='{
          minHeight: (tableData&&tableData.length)?tableData.length * 40 + 40 + "px" : "200px",
          
        }' style="width:(98vw)">
          <vxe-table header-align="center" border auto-resize resizable show-header-overflow highlight-current-row stripe
                     show-overflow highlight-hover-row style="overflow: auto; " :column-config="{ resizable: true }" :size="tableSize"
                     :print-config="{}" :expand-config="{accordion: true}" :export-config='{}' height="auto" ref="xTable1"
                     :loading="loadingTable" :data="tableData" :radio-config="{highlight: true,trigger:'row', labelField: 'name'}"
                     @radio-change="radioChangeEvent" @cell-click="cellChangeEvent">
            <vxe-column align="left" type="radio" width="80" :radio-config="{highlight: true,trigger:'row',labelField:'单选'}"></vxe-column>
            <vxe-column field="fjbm" align="center" header-align="center" title="父级编码" width="120"></vxe-column>
            <vxe-column field="sphfwssflhbbm" align="center" header-align="center" title="商品和服务税收分类合并编码" width="200"></vxe-column>
            <vxe-column field="tdyslxdm" align="center" header-align="center" title="特定要素标签归类" width="120"></vxe-column>
            <vxe-column field="cezs" align="center" header-align="center" title="差额征税"
                        width="100" v-if='formData.selectSource=="2"'></vxe-column>
            <vxe-column field="bzs" align="center" header-align="center" title="不征税"
                        width="120" v-if='formData.selectSource=="2"'></vxe-column>
            <vxe-column field="jzjtdm" align="center" header-align="center" title="即征即退代码集合" width="150">
              <template v-slot="{ row }">{{row.jzjtdm}}</template>
            </vxe-column>
            <vxe-column field="sphfwmc" align="center" header-align="center" title="商品和服务名称" width="120">
              <template v-slot="{ row }">{{row.sphfwmc}}</template>
            </vxe-column>
            <vxe-column field="sphfwfljc" align="center" header-align="center" title="商品和服务分类简称" width="150">
            </vxe-column>
            <vxe-column field="sm" align="center" header-align="center" title="说明" width="120"></vxe-column>
            <vxe-column field="zzssl" align="center" header-align="center" title="增值税税率" width="100"></vxe-column>
            <vxe-column field="zsl" align="center" header-align="center" title="征收率" width="100"></vxe-column>
            <vxe-column field="zzstsgl" align="center" header-align="center" title="增值税特殊管理" width="120"></vxe-column>
            <vxe-column field="zzszcyj" align="center" header-align="center" title="增值税政策依据" width="150"></vxe-column>
            <vxe-column field="zzstsnrdm" align="center" header-align="center" title="增值税特殊内容代码" width="130"></vxe-column>

            <vxe-column field="gjz" align="center" header-align="center" title="关键字" width="100"></vxe-column>
            <vxe-column field="sfhzx" align="center" header-align="center" title="是否汇总项" width="100"></vxe-column>
  
            <vxe-column field="dytjjbm" align="center" header-align="center" title="对应统计局编码（2011年版）或国民行业代码" width="100"></vxe-column>
            <vxe-column field="hgjcksppm" align="center" title="海关进出口商品品目" width="100"></vxe-column>
            <vxe-column field="qyrq" align="center" title="启用日期" width="100"></vxe-column>
  
          </vxe-table>
        </div>
        <vxe-pager  border size="mini" :loading="loadingPager" :current-page="tablePage.currentPage"
                    :page-size="tablePage.pageSize" :page-sizes="[5, 10, 15, 20]" :total="tablePage.totalResult"
                    :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']" @page-change="handlePageChange">
        </vxe-pager>
  
    </div>
  </template>
  <script>
  import { mixin,mixinVariable } from '@/utils/mixin.js'
  import { getCodePage } from '@/api/vmsClassifyCode.js';
  
  export default {
    name: 'projectListComp',
    mixins: [mixin,mixinVariable],
    data() {
      return {
        rowId: -1,
        autoSize:true,
        infoFormData:null,
        formData: {
          hbcode:'', //商品和服务税收分类合并编码
          productCode:'',//产品编码
          productName: '', //产品名称
          proname: '', //商品和服务名称
          selectSource: '1', //项目选取来源，1商品及服务名称 2产品名称
          shortName:'' //商品和服务简称
        },
        loadingPager: false,
        tablePage: {
          currentPage: 1,
          pageSize: 10,
          totalResult: 0,
        }, // 分页
        loadingTable: false, // 刷新
        tableData: [], // 表格数据
        selectRow:null,
  
        timer:null
      }
    },
    components: {
    },
    // mixins: [mixin],
    created() {
    },
    mounted() {
  
   
    },
    methods: {
      getDom(){
        let doms = [...document.getElementsByClassName('vxe-radio--label')]
          if(doms.length >= 1){
            clearInterval(this.timer)
            this.timer = null
          };
          for(let i =0;i<doms.length;i++){
            
            let dom = doms[i];
            if(i==0){
              dom.innerHTML = '单选'
            }else{
              dom.innerHTML = '选择'
            }
            
        }
      },
      selectRadio(){
        this.selectRow = null
        this.pcAccountRecordsFn()
      },
      del(){
        this.$refs.xTable1.clearRadioRow()
        this.selectRow = null
      },
      radioChangeEvent ({ row }) {
        this.selectRow = row
      },
      cellChangeEvent({row}){
        this.$refs.xTable1.setRadioRow(row)
      },
      // 分页
      handlePageChange(page) {
        this.tablePage.currentPage = page.currentPage
        this.tablePage.pageSize = page.pageSize
        this.pcAccountRecordsFn()
        this.selectedRow = []
      },
      // 票据记录
      async pcAccountRecordsFn() {
        
        this.loadingTable = true;
        let { data, code, message } = await getCodePage(
            {
                findType: 0,
                sphfwssflhbbm: this.formData.hbcode, // 合并编码
                sphfwmc: this.formData.proname, // 商品和服务名称
                sphfwfljc: this.formData.shortName, // 商品和服务名称简称
                pageNo: this.tablePage.currentPage,
                pageSize: this.tablePage.pageSize,
            }
        )
        
        if (code == 200) {
            this.loading = false
            this.tableData = data.records
            this.tablePage.totalResult = data.total
            this.tablePage.currentPage = data.current
            this.tablePage.pageSize = data.size
        } else {
            this.$message({
                type: 'success',
                message: message,
            })
        }
        this.loadingTable = false;
  
      },
      // 查询
      query() {
        this.pcAccountRecordsFn()
      },
      reset(){
        this.formData = {
          hbcode:'', //商品和服务税收分类合并编码
          productCode:'',//产品编码
          productName: '', //产品名称
          proname: '', //商品和服务名称
          selectSource: '1', //项目选取来源，1商品及服务名称 2产品名称
          shortName:'' //商品和服务简称
        }
      },
      // 页面展示完成， 点击保存回传数据。
      async submitSearch(){
        let k = this;
        if(k.selectRow==null || k.selectRow.length==0){
          this.$message({
                type: 'warning',
                message: '请选择开票项目！',
            })
          return
        }
        let pname = this.formData.selectSource=='1' ? '*'+k.selectRow.sphfwfljc+'*'+k.selectRow.sphfwmc : '*'+k.selectRow.sphfwmc+'*'+k.selectRow.productName  //改改改改改
        this.$emit('selected',{row:k.selectRow,pname,selectSource:this.formData.selectSource})
        this.$refs.modal1.close()
      },
      closeSearch(){
        this.$refs.modal1.close()
      },
      show(d) {
        let k = this;
        this.infoFormData = d
        this.reset();
        this.query()
        this.$refs.modal1.open()
        this.$nextTick(()=>{
          this.$refs.modal1.maximize()

          this.timer = setInterval(()=>{
            this.getDom()
          },500)
  
        })
        
        setTimeout(function(){
          k.$refs.xTable1.clearRadioRow()
          k.selectRow = null;
          
        },500)
  
      }
    },
  }
  </script>
  <style lang="scss">
  .flex-app-continer-table-div{
    width: 98vw;
  }
  .op-area{position: absolute;left: 0;top:0;}
  .expand-wrapper {
    padding: 20px;
  }
  .form-con{width: 900px; margin:0 auto;}
  .vxe-form--item-title{max-width: 500px;}
  .radio-area{width: 210px; margin:0 auto;position: relative;left:10px;padding-bottom:5px;}
  .radio-tit{margin-right:10px;}
  .box-tit{margin-bottom:10px;}
  .select-area{padding-bottom:100px;margin-top:10px;}
  .non-select{color: #F90707;margin-left:20px;}
  .select{color: #333;margin-left:20px;}
  
  :v-deep .vxe-table--render-default .vxe-cell--radio .vxe-radio--icon{
    font-size: 16px !important;
  }
  :v-deep .vxe-table--render-default.size--mini .vxe-cell--radio .vxe-radio--icon {
      font-size: 14px !important;
  }
  
  :v-deep .vxe-table--render-default.size--mini .vxe-cell--checkbox .vxe-checkbox--icon, :v-deep .vxe-table--render-default.size--mini .vxe-cell--radio .vxe-radio--icon {
      font-size: 14px;
  }
  
  :v-deep .vxe-table--render-default .vxe-cell--radio .vxe-radio--icon {
      font-size: 16px;
  }
  
  
  .vxe-radio--icon .vxe-radio--unchecked-icon{
  
  }
  </style>